<template>
  <view class="container">
    <view
      class="test"
      v-for="(item, index) in wordList"
      :key="index"
      v-show="currentWordIndex === index"
    >
      <view class="content">
        <view class="box">
          <view class="box_title">
            <text>第{{ index + 1 }}/{{ wordList.length }}题</text>
          </view>
          <view class="tips"> 升学考试频次：{{ item.wordFrequency }} </view>
          <view class="word">
            <view class="word_left">
              <text class="word_text1">{{ item.word }}</text>
              <text class="word_text2">{{ item.wordSoundmark }}</text>
            </view>
            <view class="word_right">
              <view class="word_icon" @click="play()">
                <image
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/horn.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </view>
          <view class="noop"> </view>
        </view>
        <view class="box">
          <view
            class="options"
            v-if="item.optionsList && item.optionsList.length > 0"
          >
            <view
              class="options_container"
              v-for="(option, i) in item.optionsList"
              :key="i"
              @click="choiceAnswer(item, option)"
              :class="{
                active: item.choiceAnswer === option && !isShowAnswer,
                correct: item.wordParaphrase === option && isShowAnswer,
                error: item.choiceAnswer === option && isShowAnswer,
              }"
            >
              <view class="options_content">
                {{ String.fromCharCode(i + 65) }}.{{ option }}
              </view>
              <view class="options_iamge">
                <image
                  v-if="item.wordParaphrase === option && isShowAnswer"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/correct.png"
                  mode="widthFix"
                ></image>
                <image
                  v-else-if="item.choiceAnswer === option && isShowAnswer"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/app/error.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <slot name="progress"></slot>
    <view class="button">
      <view
        class="button_content"
        @click="prevQuestion()"
        v-if="currentWordIndex !== 0"
      >
        <text>上一题</text>
      </view>
      <view
        class="button_content"
        v-if="
          (currentWordIndex === wordList.length - 1 && !isShowAnswer) ||
          (notDoneTempIndex === notDoneTempList.length - 1 && !isShowAnswer)
        "
        @click="submit()"
      >
        <text>交卷</text>
      </view>
      <view
        class="button_content"
        v-else-if="
          currentWordIndex !== wordList.length - 1 &&
          notDoneTempIndex !== notDoneTempList.length - 1
        "
        @click="nextQuestion()"
      >
        <text>下一题</text>
      </view>
      <view class="button_bg"> </view>
    </view>
    <u-mask :show="isShowPopup" :zoom="false">
      <view class="popup_container">
        <view class="popup_title">你还有未做完的题目，确定交卷吗？</view>
        <view class="popup_button">
          <view class="popup_button_content" @click="checkNotDone()">
            <view class="popup_button_icon">
              <u-icon name="arrow-left" color="#FCE38A" size="28"></u-icon>
            </view>
            <text>查看未做题</text>
          </view>
          <view class="popup_button_content" @click="confirmSubmit()">
            <text>交卷</text>
            <view class="popup_button_icon">
              <u-icon name="arrow-right" color="#FCE38A" size="28"></u-icon>
            </view>
          </view>
        </view>
      </view>
    </u-mask>
    <view class="popup popup_background" v-if="isShowTipsPopup">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
      >
        <view class="mask_img" style="width: 160rpx">
          <image
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/wait.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_text"><text>你的答题已结束</text></view>
        <view class="mask_txt">
          <text
            >距离考试结束还剩{{ hourNumber }}时{{ minuteNumber }}分{{
              secondNumber
            }}秒</text
          >
        </view>
        <view class="mask_info">
          <text class="mask_info_text2">请勿关闭此页面</text>
          <text class="mask_info_text1"
            >，等待考试时间结束后显示作答结果。</text
          >
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowTestPopup1">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
      >
        <view class="mask_img" style="width: 120rpx">
          <image
            v-if="score > passScore && score <= totalScore"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/laugh.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_score">
          <text class="mask_score_text1">{{ score }}</text
          ><text class="mask_score_text2">分</text>
        </view>
        <view class="mask_info">
          答对<text style="color: #81ddb1">{{ correctNumber }}</text
          >题,答错
          <text style="color: #e90000">{{
            wordList.length - correctNumber
          }}</text
          >题 | 获得 <text style="color: #fab407">{{ goldNum }}</text
          >个金币
        </view>
        <view class="mask_button">
          <view
            class="mask_button_content"
            :class="{ disabled: wordList.length - correctNumber === 0 }"
            @click="viewWrongQuestion()"
          >
            查看错题
          </view>
          <view class="mask_button_content" @click="viewAllQuestion()">
            查看全部题目
          </view>
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowTestPopup2">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
        style="width: 1030rpx"
      >
        <view class="mask_img" style="width: 120rpx">
          <image
            v-if="winFlag === 'Y'"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/laugh.png"
            mode="widthFix"
          ></image>
          <image
            v-else-if="winFlag === 'N'"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_tips">
          <text v-if="winFlag === 'Y'">我方战胜！</text>
          <text class="active" v-else-if="winFlag === 'N'">我方战败！</text>
        </view>
        <view class="mask_info">
          你获得了 <text>{{ score }}</text
          >分（ 答对<text style="color: #81ddb1">{{ correctNumber }}</text
          >题,答错
          <text style="color: #e90000">{{
            wordList.length - correctNumber
          }}</text
          >题 ）| 获得 <text style="color: #fab407">{{ goldNum }}</text
          >个金币
        </view>
        <view class="mask_button">
          <view
            class="mask_button_content"
            :class="{ disabled: wordList.length - correctNumber === 0 }"
            @click="viewWrongQuestion()"
          >
            查看错题
          </view>
          <view class="mask_button_content" @click="viewAllQuestion()">
            查看全部题目
          </view>
        </view>
        <view class="mask_list">
          <view class="mask_list_container">
            <view class="mask_list_title">战胜方</view>
            <view class="mask_list_content">
              <view
                class="mask_list_box"
                v-for="(item, index) in winTeam"
                :key="index"
              >
                <view class="mask_list_text">
                  <text class="mask_list_text1">{{ item.userName }}</text>
                </view>
                <u-image
                  width="50rpx"
                  height="50rpx"
                  :src="item.headImg"
                  shape="circle"
                ></u-image>
                <view class="mask_list_text" v-if="item.waiverFlag">
                  <text class="mask_list_text2">已弃权</text>
                </view>
                <view class="mask_list_text" v-else>
                  <text class="mask_list_text2">{{ item.gotScore }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="mask_list_container active">
            <view class="mask_list_title">战败方</view>
            <view class="mask_list_content">
              <view
                class="mask_list_box"
                v-for="(item, index) in loseTeam"
                :key="index"
              >
                <view class="mask_list_text">
                  <text class="mask_list_text1">{{ item.userName }}</text>
                </view>
                <u-avatar
                  :src="item.headImg"
                  img-mode="fill"
                  :size="60"
                ></u-avatar>
                <view class="mask_list_text" v-if="item.waiverFlag">
                  <text class="mask_list_text2">已弃权</text>
                </view>
                <view class="mask_list_text" v-else>
                  <text class="mask_list_text2">{{ item.gotScore }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="popup popup_background" v-if="isShowTestPopup3">
      <view
        class="mask_container animate__animated animate__faster animate__fadeInDown"
        style="width: 650px"
      >
        <view class="mask_img" style="width: 120rpx">
          <image
            v-if="rank === 1"
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/laugh.png"
            mode="widthFix"
          ></image>
          <image
            v-else
            src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cry.png"
            mode="widthFix"
          ></image>
        </view>
        <view class="mask_tips">
          <text>第{{ rank }}名</text> </view
        >1
        <view class="mask_info">
          你获得了 <text>{{ score }}</text
          >分（ 答对<text style="color: #81ddb1">{{ correctNumber }}</text
          >题,答错
          <text style="color: #e90000">{{
            wordList.length - correctNumber
          }}</text
          >题 ）| 获得 <text style="color: #fab407">{{ goldNum }}</text
          >个金币
        </view>
        <view class="mask_button">
          <view
            class="mask_button_content"
            :class="{ disabled: wordList.length - correctNumber === 0 }"
            @click="viewWrongQuestion()"
          >
            查看错题
          </view>
          <view class="mask_button_content" @click="viewAllQuestion()">
            查看全部题目
          </view>
        </view>
        <view class="mask_team">
          <view class="mask_team_title">比赛排名</view>
          <view class="mask_team_content">
            <view
              class="mask_team_box"
              v-for="(item, index) in userList"
              :key="index"
            >
              <view class="mask_team_text">
                <text class="mask_team_text1">{{ item.userName }}</text>
              </view>
              <u-image
                width="50rpx"
                height="50rpx"
                :src="item.headImg"
                shape="circle"
              ></u-image>
              <view class="mask_team_text" v-if="item.waiverFlag">
                <text class="mask_team_text2">已弃权</text>
              </view>
              <view class="mask_team_text" v-else>
                <text class="mask_team_text2">{{ item.gotScore }}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="mask mask_effect" v-if="isShowEffectPopup1">
      <view class="effect" v-if="score == totalScore">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/666.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="effect" v-else-if="score < passScore">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/hard.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="mask mask_effect" v-if="isShowEffectPopup2">
      <view class="effect" v-if="winFlag === 'Y'">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/666.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="effect" v-else-if="winFlag === 'N'">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/hard.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
    <view class="mask mask_effect" v-if="isShowEffectPopup3">
      <view class="effect" v-if="rank === 1">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/666.png"
          mode="widthFix"
        ></image>
      </view>
      <view class="effect" v-if="rank === userList.length">
        <image
          class="effect1"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/beam.png"
          mode="widthFix"
        ></image>
        <image
          class="effect2"
          src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/hard.png"
          mode="widthFix"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
import { arrayRandomly } from "@/libs/tools";
const englishAudioContext = uni.createInnerAudioContext();
englishAudioContext.autoplay = true;
export default {
  components: {},
  props: {
    wordList: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    currentWordNumber() {
      return this.currentWordIndex + 1;
    },
  },
  data() {
    return {
      wordInfo: null,
      currentWordIndex: 0,
      correctList: [],
      errorList: [],
      errorTempList: [],
      errorTempIndex: 0,
      allList: [],
      correctNumber: 0,
      notDoneList: [],
      notDoneTempList: [],
      notDoneTempIndex: 0,
      score: 0,
      singleScore: 0,
      passScore: 80,
      totalScore: 100,
      goldNum: 0,
      hourNumber: "00",
      minuteNumber: "00",
      secondNumber: "00",
      isShowPopup: false,
      isShowTestPopup1: false,
      isShowTestPopup2: false,
      isShowTestPopup3: false,
      isShowEffectPopup1: false,
      isShowEffectPopup2: false,
      isShowEffectPopup3: false,
      isShowTipsPopup: false,
      isSeeNotDone: false,
      isSeeError: false,
      isShowAnswer: false,
      reportList: [],
      winFlag: "Y",
      winTeam: [],
      loseTeam: [],
      rank: 1,
      userList: [],
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.wordList.forEach((item) => {
        this.allList.push(item.id);
        this.correctList.push(0);
        this.errorList.push(0);
        this.notDoneList.push(-1);
      });
      this.singleScore = this.totalScore / this.wordList.length;
      this.initData();
      this.play();
      this.initOptions();
    },
    initData() {
      this.wordInfo = this.wordList[this.currentWordIndex];
    },
    initOptions() {
      this.wordList.forEach((item) => {
        let optionsList = [];
        optionsList.push(
          item.optionA,
          item.optionB,
          item.optionC,
          item.wordParaphrase
        );
        optionsList = arrayRandomly(optionsList);
        this.$set(item, "optionsList", optionsList);
        this.$set(item, "choiceAnswer", "");
      });
    },
    choiceAnswer(item, option) {
      this.$set(item, "choiceAnswer", option);
    },
    play() {
      if (!englishAudioContext.paused) return;
      englishAudioContext.src = this.wordInfo.wordAudio;
      englishAudioContext.play();
    },
    prevQuestion() {
      if (this.isSeeNotDone) return;
      if (
        this.currentWordIndex === 0 ||
        (this.isSeeError && this.currentWordIndex === this.errorTempList[0])
      )
        return;
      if (this.isSeeError) {
        this.errorTempIndex--;
        this.currentWordIndex = this.errorTempList[this.errorTempIndex];
        this.initData();
      } else {
        this.currentWordIndex--;
        this.initData();
        this.play();
      }
    },
    nextQuestion() {
      if (!this.isShowAnswer) {
        if (!this.isSeeNotDone) {
          this.checkRightAndWrong();
          this.currentWordIndex++;
        } else {
          this.checkRightAndWrong();
          this.notDoneTempIndex++;
          this.currentWordIndex = this.notDoneTempList[this.notDoneTempIndex];
        }
        this.initData();
        this.play();
      } else {
        if (
          this.currentWordIndex === this.wordList.length - 1 ||
          this.errorTempIndex === this.errorTempList.length - 1
        )
          return;
        if (this.isSeeError) {
          this.errorTempIndex++;
          this.currentWordIndex = this.errorTempList[this.errorTempIndex];
          this.initData();
        } else {
          this.currentWordIndex++;
          this.initData();
        }
      }
    },
    submit(flag = false) {
      this.checkRightAndWrong();
      let isHasNotDone = this.notDoneList.some((item) => {
        return item > -1;
      });
      if (isHasNotDone && !flag) {
        this.isShowPopup = true;
        return;
      }
      this.confirmSubmit();
    },
    confirmSubmit() {
      this.submitTestPaper();
    },
    submitTestPaper() {
      this.$emit("clearTimer");
      let correctList = [];
      this.correctList.forEach((item) => {
        if (item) {
          correctList.push(item);
        }
      });
      let errorList = [];
      this.errorList.forEach((item) => {
        if (item) {
          errorList.push(item);
        }
      });
      let count = 0;
      this.correctList.forEach((item) => {
        if (item) {
          count++;
        }
      });
      this.correctNumber = count;
      this.score = parseInt((this.singleScore * this.correctNumber).toFixed(2));
      this.isSeeNotDone = false;
      this.isShowPopup = false;
      this.$emit(
        "commitTest",
        correctList,
        errorList,
        this.allList,
        this.score
      );
    },
    showResult(num, list) {
      this.goldNum = num;
      this.reportList = list || [];
      this.isShowEffectPopup1 = true;
      if (this.score >= this.passScore && this.score < this.totalScore) {
        this.isShowTestPopup1 = true;
      } else {
        setTimeout(() => {
          this.isShowTestPopup1 = true;
        }, 3000);
      }
    },
    handleResult(num, gameType) {
      if (gameType === "1") {
        this.goldNum = num;
        this.isShowEffectPopup1 = true;
        if (this.score >= this.passScore && this.score < this.totalScore) {
          this.isShowTestPopup1 = true;
        } else {
          setTimeout(() => {
            this.isShowTestPopup1 = true;
          }, 3000);
        }
      } else if (gameType === "2" || gameType === "3") {
        this.isShowTipsPopup = true;
        this.$emit("command");
      }
    },
    showWordResult1(flag, score, gold, winTeam, loseTeam) {
      this.winFlag = flag;
      this.score = score;
      this.goldNum = gold;
      this.winTeam = winTeam;
      this.loseTeam = loseTeam;
      this.isShowTipsPopup = false;
      this.isShowEffectPopup2 = true;
      setTimeout(() => {
        this.isShowTestPopup2 = true;
      }, 3000);
    },
    showWordResult2(rank, score, gold, userList) {
      this.rank = rank;
      this.score = score;
      this.goldNum = gold;
      this.userList = userList;
      this.isShowTipsPopup = false;
      this.isShowEffectPopup3 = true;
      if (this.rank === 1 || this.rank === this.userList.length) {
        setTimeout(() => {
          this.isShowTestPopup3 = true;
        }, 3000);
      } else {
        this.isShowTestPopup3 = true;
      }
    },
    checkRightAndWrong() {
      const choiceAnswerText =
        this.wordList[this.currentWordIndex].choiceAnswer;
      if (choiceAnswerText !== "") {
        this.notDoneList.splice(this.currentWordIndex, 1, -1);
        if (choiceAnswerText === this.wordInfo.wordParaphrase) {
          this.correctList.splice(this.currentWordIndex, 1, this.wordInfo.id);
          this.errorList[this.currentWordIndex] = 0;
        } else {
          this.errorList.splice(this.currentWordIndex, 1, this.wordInfo.id);
          this.correctList[this.currentWordIndex] = 0;
        }
      } else {
        this.errorList.splice(this.currentWordIndex, 1, this.wordInfo.id);
        this.notDoneList.splice(
          this.currentWordIndex,
          1,
          this.currentWordIndex
        );
      }
    },
    checkNotDone() {
      this.isSeeNotDone = true;
      this.getNotDone();
      this.currentWordIndex = this.notDoneTempList[this.notDoneTempIndex];
      this.initData();
      this.play();
      this.isShowPopup = false;
    },
    getNotDone() {
      this.notDoneTempList = [];
      this.notDoneTempIndex = 0;
      this.notDoneList.forEach((item) => {
        if (item > -1) {
          this.notDoneTempList.push(item);
        }
      });
    },
    viewWrongQuestion() {
      if (this.wordList.length - this.correctNumber === 0) return;
      this.errorList.forEach((item, index) => {
        if (item) {
          this.errorTempList.push(index);
        }
      });
      this.currentWordIndex = this.errorTempList[this.errorTempIndex];
      this.initData();
      this.isShowAnswer = true;
      this.isSeeError = true;
      this.isShowEffectPopup1 = false;
      this.isShowEffectPopup2 = false;
      this.isShowEffectPopup3 = false;
      this.isShowTestPopup1 = false;
      this.isShowTestPopup2 = false;
      this.isShowTestPopup3 = false;
    },
    viewAllQuestion() {
      this.currentWordIndex = 0;
      this.initData();
      this.isShowAnswer = true;
      this.isShowEffectPopup1 = false;
      this.isShowEffectPopup2 = false;
      this.isShowEffectPopup3 = false;
      this.isShowTestPopup1 = false;
      this.isShowTestPopup2 = false;
      this.isShowTestPopup3 = false;
    },
    handleCountDown(hourNumber, minuteNumber, secondNumber) {
      this.hourNumber = hourNumber;
      this.minuteNumber = minuteNumber;
      this.secondNumber = secondNumber;
    },
  },
};
</script>

<style lang="scss" scoped>
@import "./WordTestLook.scss";
</style>
